<template>
  <rt-view>
    <rt-header>
      <rt-list-header>
        <rt-header-icon slot="icon" icon="rt-portal-account" />
        <rt-header-title title="小瑞活动分析" />
        <template v-if="tabsStatus == 0" slot="btn">
          <rt-button
            icon-name="rt-portal-export"
            type="primary"
            @click="exportCampaignAnalysis()"
            >导出</rt-button
          ></template
        >
        <template v-if="tabsStatus == 1" slot="btn">
          <rt-button
            icon-name="rt-portal-export"
            type="primary"
            @click="exportCampaignUpAnalysis()"
            >导出</rt-button
          ></template
        >
        <template v-if="tabsStatus == 2" slot="btn">
          <rt-button
            icon-name="rt-portal-export"
            type="primary"
            @click="exportShared()"
            >导出</rt-button
          ></template
        >
        <rt-search
          v-if="tabsStatus == 0"
          slot="search"
          v-model="campaignParam.name"
          placeholder="根据活动名称进行搜索"
          @on-search="campaignRefreshTable()"
        />
        <rt-search
          v-if="tabsStatus == 1"
          slot="search"
          v-model="campaignUpParam.campaignName"
          placeholder="根据活动名称进行搜索"
          @on-search="campaignUpRefreshTable()"
        />
        <rt-search
          v-if="tabsStatus == 2"
          slot="search"
          v-model="sharedParam.campaignName"
          placeholder="根据活动名称进行搜索"
          @on-search="sharedRefreshTable()"
        />
      </rt-list-header>

      <rt-list-filter v-if="tabsStatus == 0" slot="extra">
        <rt-section>
          <rt-form>
            <rt-row :gutter="32">
              <rt-col :span="6">
                <rt-form-item label="活动时间">
                  <el-date-picker
                    v-model="campaignTimeValue"
                    :clearable="false"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    range-separator="至"
                    type="datetimerange"
                    @change="campaignTime"
                  />
                </rt-form-item>
              </rt-col>
            </rt-row>
          </rt-form>
        </rt-section>
        <template slot="btns">
          <rt-button @click="campaignReset()">重置</rt-button>
          <rt-button type="primary" @click="campaignRefreshTable()"
            >查询</rt-button
          >
        </template>
      </rt-list-filter>
      <rt-list-filter v-if="tabsStatus == 1" slot="extra">
        <rt-content>
          <rt-section>
            <rt-form>
              <rt-row :gutter="32">
                <rt-col :span="6">
                  <rt-form-item label="昵称">
                    <rt-input v-model="campaignUpParam.nickName" />
                  </rt-form-item>
                </rt-col>
                <rt-col :span="6">
                  <rt-form-item label="客户名称">
                    <rt-input v-model="campaignUpParam.accountName" />
                  </rt-form-item>
                </rt-col>
                <rt-col :span="6">
                  <rt-form-item label="姓名">
                    <rt-input v-model="campaignUpParam.name" />
                  </rt-form-item>
                </rt-col>
                <rt-col :span="6">
                  <rt-form-item label="电话">
                    <rt-input v-model="campaignUpParam.mobilePhone" />
                  </rt-form-item>
                </rt-col>
              </rt-row>
              <rt-row :gutter="32">
                <rt-col :span="12">
                  <rt-form-item label="报名时间">
                    <el-date-picker
                      v-model="campaignUpTimeValue"
                      :clearable="false"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      range-separator="至"
                      type="datetimerange"
                      @change="campaignUpTime"
                    />
                  </rt-form-item>
                </rt-col>
              </rt-row>
            </rt-form>
          </rt-section>
        </rt-content>
        <template slot="btns">
          <rt-button @click="campaignUpReset()">重置</rt-button>
          <rt-button type="primary" @click="campaignUpRefreshTable()"
            >查询</rt-button
          >
        </template>
      </rt-list-filter>
      <rt-list-filter v-if="tabsStatus == 2" slot="extra">
        <rt-content>
          <rt-section>
            <rt-form>
              <rt-row :gutter="32">
                <rt-col :span="6">
                  <rt-form-item label="昵称">
                    <rt-input v-model="sharedParam.nickName" />
                  </rt-form-item>
                </rt-col>
                <rt-col :span="6">
                  <rt-form-item label="客户名称">
                    <rt-input v-model="sharedParam.accountName" />
                  </rt-form-item>
                </rt-col>
                <rt-col :span="6">
                  <rt-form-item label="姓名">
                    <rt-input v-model="sharedParam.name" />
                  </rt-form-item>
                </rt-col>
                <rt-col :span="6">
                  <rt-form-item label="电话">
                    <rt-input v-model="sharedParam.mobilePhone" />
                  </rt-form-item>
                </rt-col>
              </rt-row>
              <rt-row :gutter="32">
                <rt-col :span="12">
                  <rt-form-item label="分享时间">
                    <el-date-picker
                      v-model="sharedTimeValue"
                      :clearable="false"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      range-separator="至"
                      type="datetimerange"
                      @change="sharedTime"
                    />
                  </rt-form-item>
                </rt-col>
              </rt-row>
            </rt-form>
          </rt-section>
        </rt-content>
        <template slot="btns">
          <rt-button @click="sharedReset()">重置</rt-button>
          <rt-button type="primary" @click="sharedRefreshTable()"
            >查询</rt-button
          >
        </template>
      </rt-list-filter>
    </rt-header>
    <rt-content>
      <rt-content-tabs v-model="tabsStatus" @tab-click="getData">
        <rt-tab-pane>
          <rt-badge slot="label">统计</rt-badge>
        </rt-tab-pane>
        <rt-tab-pane>
          <rt-badge slot="label">报名明细</rt-badge>
        </rt-tab-pane>
        <rt-tab-pane>
          <rt-badge slot="label">分享明细</rt-badge>
        </rt-tab-pane>
      </rt-content-tabs>
      <rt-table
        v-show="tabsStatus == 0"
        ref="campaignTable"
        :fetch="campaignFetch"
        :total-record="campaignTotals"
        :sectionable="false"
      >
        <rt-table-column sortable label="活动名称" prop="name" />
        <rt-table-column sortable label="报名次数" prop="signUpCount" />
        <rt-table-column sortable label="分享次数" prop="shareCount" />
        <rt-table-column sortable label="活动时间">
          <template slot-scope="scope">
            {{ scope.row.start_time | moment('YYYY-MM-DD HH:mm') }} 至
            {{ scope.row.end_time | moment('YYYY-MM-DD HH:mm') }}
          </template>
        </rt-table-column>
      </rt-table>
      <rt-table
        v-show="tabsStatus == 1"
        ref="campaignUpTable"
        :total-record="campaignSignUpTableTotals"
        :fetch="campaignUpFetch"
        :sectionable="false"
      >
        <rt-table-column sortable prop="campaignname" label="活动名称" />
        <rt-table-column sortable label="报名时间">
          <template slot-scope="scope">
            {{ scope.row.createdon | moment('YYYY-MM-DD HH:mm') }}
          </template>
        </rt-table-column>
        <rt-table-column sortable prop="nickname" label="昵称" />
        <rt-table-column sortable prop="bbs_account_name" label="客户名称" />
        <rt-table-column sortable prop="name" label="姓名" />
        <rt-table-column sortable prop="mobilephone" label="电话" />
      </rt-table>
      <rt-table
        v-show="tabsStatus == 2"
        ref="sharedTable"
        :total-record="sharedTableTotals"
        :fetch="sharedFetch"
        :sectionable="false"
      >
        <rt-table-column sortable prop="campaignname" label="活动名称" />
        <rt-table-column sortable label="分享时间">
          <template slot-scope="scope">
            {{ scope.row.createdon | moment('YYYY-MM-DD HH:mm') }}
          </template>
        </rt-table-column>
        <rt-table-column sortable prop="nickname" label="昵称" />
        <rt-table-column sortable prop="bbs_account_name" label="客户名称" />
        <rt-table-column sortable prop="name" label="姓名" />
        <rt-table-column sortable prop="mobilephone" label="电话" />
      </rt-table>
    </rt-content>
  </rt-view>
</template>
<script>
import util from '../../libs/util';
export default {
  data() {
    return {
      tabsStatus: 0,

      campaignTimeValue: [],
      campaignTotals: 0,
      campaignParam: {
        pageSize: 20,
        pageIndex: 0,
        name: '',
        startTime: '',
        endTime: '',
        exportName: '活动分析',
        exportMap: {
          name: '活动名称',
          signUpCount: '报名次数',
          shareCount: '分享次数',
          start_time: '活动开始时间',
          end_time: '活动结束时间'
        }
      },

      campaignUpTimeValue: [],
      campaignSignUpTableTotals: 0,
      campaignUpParam: {
        mobilePhone: '',
        accountName: '',
        nickName: '',
        campaignName: '',
        pageSize: 20,
        pageIndex: 1,
        name: '',
        startTime: '',
        endTime: '',
        exportName: '报名明细',
        exportMap: {
          campaignname: '活动名称',
          createdon: '报名时间',
          nickname: '昵称',
          bbs_account_name: '客户名称',
          name: '姓名',
          mobilephone: '电话'
        }
      },

      sharedTimeValue: [],
      sharedTableTotals: 0,
      sharedParam: {
        mobilePhone: '',
        accountName: '',
        nickName: '',
        campaignName: '',
        pageSize: 20,
        pageIndex: 1,
        name: '',
        startTime: '',
        endTime: '',
        exportName: '分享明细',
        exportMap: {
          campaignname: '活动名称',
          createdon: '分享时间',
          nickname: '昵称',
          bbs_account_name: '客户名称',
          name: '姓名',
          mobilephone: '电话'
        }
      }
    };
  },
  mounted() {},
  methods: {
    getData(val) {
      if (val.index == 0) {
        this.campaignRefreshTable();
      }
      if (val.index == 1) {
        this.campaignUpRefreshTable();
      }
      if (val.index == 2) {
        this.sharedRefreshTable();
      }
    },
    //表格元素
    //获取数据及分页
    campaignFetch(page) {
      this.campaignParam.pageSize = page.pageSize;
      this.campaignParam.pageIndex = page.pageIndex;
      var that = this;
      return new Promise(resolve => {
        rt.post('/api/bbs/campaign/listcampaignanalysis', that.campaignParam)
          .then(res => {
            that.campaignTotals = res.count;
            resolve(res.list);
          })
          .catch(error => {
            rt.showErrorToast(error);
          });
      }).then(res => {
        return res;
      });
    },
    campaignTime(val) {
      if (val) {
        this.campaignParam.startTime = val[0];
        this.campaignParam.endTime = val[1];
      } else {
        this.campaignParam.startTime = null;
        this.campaignParam.endTime = null;
      }
    },
    // 表格刷新
    campaignRefreshTable() {
      // this.getJobName();
      this.$refs['campaignTable'].handleIndexChange(1);
    },
    exportCampaignAnalysis() {
      let auth = this.$store.state.auth;
      util.commDownExcel(
        'api/bbs/campaign/exportcampaignanalysis',
        this.campaignParam,
        auth.accessToken
      );
    },
    //重置按钮
    campaignReset() {
      this.campaignParam.startTime = null;
      this.campaignParam.endTime = null;
      this.campaignParam.name = null;
      this.campaignTimeValue = null;
      this.campaignRefreshTable();
    },

    campaignUpFetch(page) {
      console.log(page);
      this.campaignUpParam.pageSize = page.pageSize;
      this.campaignUpParam.pageIndex = page.pageIndex;
      var that = this;
      return new Promise(resolve => {
        rt.post(
          '/api/bbs/camppaignsignup/serchcampaignsignup',
          that.campaignUpParam
        )
          .then(res => {
            that.campaignSignUpTableTotals = res.count;
            resolve(res.list);
          })
          .catch(error => {
            rt.showErrorToast(error);
          });
      }).then(res => {
        return res;
      });
    },
    campaignUpReset() {
      this.campaignUpParam.startTime = null;
      this.campaignUpParam.endTime = null;
      this.campaignUpParam.name = null;
      this.campaignUpParam.mobilePhone = null;
      this.campaignUpParam.accountName = null;
      this.campaignUpParam.nickName = null;
      this.campaignUpParam.campaignName = '';
      this.campaignUpTimeValue = null;
      this.campaignUpRefreshTable();
    },
    campaignUpRefreshTable() {
      // this.getJobName();
      this.$refs['campaignUpTable'].handleIndexChange(1);
    },
    campaignUpTime(val) {
      if (val) {
        this.campaignUpParam.startTime = val[0];
        this.campaignUpParam.endTime = val[1];
      } else {
        this.campaignUpParam.startTime = null;
        this.campaignUpParam.endTime = null;
      }
    },
    exportCampaignUpAnalysis() {
      let auth = this.$store.state.auth;
      util.commDownExcel(
        'api/bbs/camppaignsignup/exportcampaignupanalysis',
        this.campaignUpParam,
        auth.accessToken
      );
    },

    sharedFetch(page) {
      this.sharedParam.pageSize = page.pageSize;
      this.sharedParam.pageIndex = page.pageIndex;
      var that = this;
      return new Promise(resolve => {
        rt.post('/api/bbs/sharedlog/serchshared', that.sharedParam)
          .then(res => {
            that.sharedTableTotals = res.count;
            resolve(res.list);
          })
          .catch(error => {
            rt.showErrorToast(error);
          });
      }).then(res => {
        return res;
      });
    },
    sharedReset() {
      this.sharedParam.startTime = null;
      this.sharedParam.endTime = null;
      this.sharedParam.name = null;
      this.sharedParam.mobilePhone = null;
      this.sharedParam.accountName = null;
      this.sharedParam.nickName = null;
      this.sharedParam.campaignName = null;
      this.sharedTimeValue = null;
      this.sharedRefreshTable();
    },
    sharedRefreshTable() {
      // this.getJobName();
      this.$refs['sharedTable'].handleIndexChange(1);
    },
    sharedTime(val) {
      if (val) {
        this.sharedParam.startTime = val[0];
        this.sharedParam.endTime = val[1];
      } else {
        this.sharedParam.startTime = null;
        this.sharedParam.endTime = null;
      }
    },
    exportShared() {
      let auth = this.$store.state.auth;
      util.commDownExcel(
        'api/bbs/sharedlog/exportshared',
        this.sharedParam,
        auth.accessToken
      );
      // rt.post('/api/bbs/sharedlog/exportshared', this.sharedParam)
      //   .then(res => {
      //     console.log(res);
      //   })
      //   .catch(error => {
      //     rt.showErrorToast(error);
      //   });
    }
  }
};
</script>
